<template>
  <el-dialog :title="title"
             :close-on-click-modal="false"
             v-loading="loading"
             @close="$emit('close')" :visible.sync="visible" width="1400px">
    <el-form :model="form" :rules="rules" ref="form" size="mini" label-width="150px" inline :disabled="isDetail">
      <el-collapse class="easy-ui-collapse" :value="[1,2,3,4]">
        <el-collapse-item :name="1">
          <div slot="title" class="card-title">
            基础信息
          </div>
          <div>
            <el-form-item label="规则名称" prop="ruleName">
              <el-input class="w450" v-model="form.ruleName"/>
            </el-form-item>
            <el-form-item label="是否自动出票" prop="openAutoIssue">
              <el-select class="w450" v-model="form.openAutoIssue" clearable>
                <el-option
                  v-for="item in options.openAutoIssue"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="适用店铺">
              <el-checkbox-group v-model="customerInfoArr">
                <el-checkbox v-for="item in options.customerInfo" :key="item.shopNo" :label="item.shopNo">
                  {{item.shopName}}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="航空公司" prop="airline">
              <el-select class="w450" v-model="form.airline" filterable placeholder="请选择" clearable>
                <el-option v-for="item in airlineOptions" :key="item.key" :label="item.value" :value="item.key"/>
              </el-select>
            </el-form-item>
            <el-form-item label="乘机日期">
              <el-date-picker
                class="w160"
                value-format="yyyy-MM-dd"
                v-model="form.departDateStart"
                type="date"
                placeholder="开始日期">
              </el-date-picker>
            </el-form-item>
            至
            <el-form-item>
              <el-date-picker
                class="w160"
                value-format="yyyy-MM-dd"
                v-model="form.departDateEnd"
                type="date"
                placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="适用航程类型" prop="flightWay">
              <div class="w450">
                <el-checkbox-group v-model="flightWayArr" style="width: 228px;display: inline-block;">
                  <el-checkbox v-for="item in options.flightWay" :key="item.key" :label="item.key">{{item.value}}</el-checkbox>
                </el-checkbox-group>
                <el-checkbox v-model="form.applyShareFlight" true-label="1" false-label="0">适用共享航班</el-checkbox>
              </div>
            </el-form-item>
            <el-form-item label="适用乘客类型" prop="ageType">
              <el-checkbox-group v-model="ageTypeArr">
                <el-checkbox v-for="item in options.ageType" :key="item.key" :label="item.key">{{item.value}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="出发城市" prop="departPort">
              <el-input class="w450" v-model="form.departPort"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="多个使用/隔开,   ---空表示匹配所有。格式：CAN/PEK"/>
            </el-form-item>
            <el-form-item label="排除城市" prop="departPortExclude">
              <el-input class="w450" v-model="form.departPortExclude"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="多个使用/隔开,   ---空表示匹配所有。格式：CAN/PEK"/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="到达城市" prop="arrivePort">
              <el-input class="w450" v-model="form.arrivePort"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="多个使用/隔开,   ---空表示匹配所有。格式：CAN/PEK"/>
            </el-form-item>
            <el-form-item label="排除城市" prop="arrivePortExclude">
              <el-input class="w450" v-model="form.arrivePortExclude"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="多个使用/隔开,   ---空表示匹配所有。格式：CAN/PEK"/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="排除航线">
              <el-input v-model="form.excludeFlightTrip" style="width: 1065px"
                        placeholder="多个使用/隔开,   ---空表示匹配所有。格式：CAN-PEK/CSX-SHA"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="航班号" prop="includeFlightNo">
              <el-input class="w450" v-model="form.includeFlightNo"
                        placeholder="多个使用/隔开,   ---空表示匹配所有。格式：HU2222/HU2233"/>
            </el-form-item>
            <el-form-item label="适用时间段">
              <el-time-select
                class="w160"
                v-model="form.startTime"
                :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '24:00'
              }"
                placeholder="选择时间">
              </el-time-select>
              至
              <el-time-select
                class="w160"
                v-model="form.endTime"
                :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '24:00'
              }"
                placeholder="选择时间">
              </el-time-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="除外航班号" prop="excludeFlightNo">
              <el-input class="w450" v-model="form.excludeFlightNo"
                        placeholder="多个使用/隔开,   ---空表示匹配所有。格式：HU2222/HU2233"/>
            </el-form-item>
            <el-form-item label="适用起飞前" prop="takeoffTimeLimit">
              <el-select class="w450" v-model="form.takeoffTimeLimit" clearable>
                <el-option
                  v-for="item in options.takeoffTimeLimit"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="适用政策代码" prop="applyPolicyCodes">
              <el-input class="w450" v-model="form.applyPolicyCodes" placeholder="多个使用/隔开"
                        @keyup.native.enter="form.applyPolicyCodes+='/'"/>
            </el-form-item>
            <el-form-item label="适用舱位" prop="subClass">
              <el-input class="w450"
                        @keyup.native.enter="form.subClass+='/'"
                        v-model="form.subClass" placeholder="多个使用/隔开,   ---空表示匹配所有。格式：H/F/Y"/>
            </el-form-item>
          </div>
          <el-form-item label="证件限制" prop="cardTypeLimit">
            <el-checkbox-group class="w450" v-model="cardTypeLimitArr">
              <el-checkbox v-for="item in options.cardTypeLimit" :key="item.key" :label="item.key">{{item.value}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="证件号限制" prop="cardNoLimit">
            <el-input class="w450"
                      @keyup.native.enter="form.cardNoLimit+='/'"
                      v-model="form.cardNoLimit"
                      placeholder="例如：证件号430开头，表示该政策只适合湖南地区旅客适用，多个限制用/隔开"/>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item :name="3">
          <div slot="title" class="card-title">
            出票设置
          </div>
          <div>
            <el-form-item label="单人最小利润">
              <el-input class="w280" v-model="form.singleMinProfit">
                <el-radio-group v-model="form.singleMinProfitType" slot="prepend">
                  <el-radio v-for="item in options.singleMinProfitType" :key="item.key" :label="item.key">
                    {{item.value}}
                  </el-radio>
                </el-radio-group>
                <template slot="append">{{form.singleMinProfitType === '1'?'元':'%'}}</template>
              </el-input>
            </el-form-item>
            <span class="font-gray">(则按票面价百分比计算亏损)</span>
            <el-form-item label="自动出票票价" prop="autoIssuePrice">
              <el-radio-group v-model="form.autoIssuePrice">
                <el-radio v-for="item in options.autoIssuePrice" :key="item.key" :label="item.key">{{item.value}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <!--<div>-->
          <!--<el-form-item label="是否开启降舱出票" prop="openDownSubClass">-->
          <!--<el-select class="w450" v-model="form.openDownSubClass" clearable>-->
          <!--<el-option-->
          <!--v-for="item in options.openDownSubClass"-->
          <!--:key="item.key"-->
          <!--:label="item.value"-->
          <!--:value="item.key">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <!--</el-form-item>-->
          <!--</div>-->
          <div>
            <el-form-item label="换编码出票" prop="openChangePnr">
              <el-select class="w450" v-model="form.openChangePnr" clearable>
                <el-option
                  v-for="item in options.openChangePnr"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key">
                </el-option>
              </el-select>
              <el-checkbox v-model="form.openCreatePnr" true-label="1">入库时无编码,则生成编码</el-checkbox>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="是否比价">
              <el-select class="w450" v-model="form.isComparePrice" clearable>
                <el-option
                  label="不比价"
                  :value="0">
                </el-option>
                <el-option
                  label="比价"
                  :value="1">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="协议号" prop="protocolNo">
              <el-input class="w450"
                        @keyup.native.enter="form.protocolNo+='/'"
                        v-model="form.protocolNo"
                        placeholder="多个使用/隔开"/>
            </el-form-item>
          </div>
        </el-collapse-item>
        <el-collapse-item :name="4">
          <div slot="title" class="card-title">
            出票渠道设置
          </div>
          <el-container class="input-panel">
            <el-aside width="120px" style="line-height: 70px">当票面价为</el-aside>
            <el-main>
            <div>
                <el-form-item>
                  <div class="w150">
                    {{form.issueChanel1PriceMin}}元
                  </div>
                </el-form-item>
                至
                <el-form-item>
                  <el-input class="w150" v-model="form.issueChanel1PriceMax">元</el-input>
                </el-form-item>
                <el-form-item prop="issueChanel1">
                  <span class="font-red">*</span>
                  选
                  <el-select class="w200" v-model="form.issueChanel1">
                    <el-option
                      v-for="item in options.issueChanel"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
                    </el-option>
                  </el-select>
                  出票
                </el-form-item>
              </div>
              <div>
                <el-form-item>
                  <el-input class="w150" v-model="form.issueChanel2PriceMin">元</el-input>
                </el-form-item>
                至
                <el-form-item>
                  <el-input class="w150" v-model="form.issueChanel2PriceMax">元</el-input>
                </el-form-item>
                <el-form-item prop="issueChanel2">
                  <span class="font-red">*</span>
                  选
                  <el-select class="w200" v-model="form.issueChanel2">
                    <el-option
                      v-for="item in options.issueChanel"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
                    </el-option>
                  </el-select>
                  出票
                </el-form-item>
              </div>
            </el-main>
          </el-container>
          <el-container class="input-panel">
            <el-aside width="120px" style="line-height: 50px">B2B</el-aside>
            <div style="padding-top: 10px">
              <el-form-item label="后返返点" prop="b2bRebate">
                <c-percent-input class="w200" v-model="form.b2bRebate" :disabled="!(!form.b2bFixedFee || (!!form.b2bRebate && !!form.b2bFixedFee))" clearable/>
              </el-form-item>
              <el-form-item label="后返金额" prop="b2bFixedFee">
                <el-input class="w200" v-model="form.b2bFixedFee" :disabled="!!form.b2bRebate" clearable>
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </div>
          </el-container>
          <el-container class="input-panel">
            <el-aside width="120px" style="line-height: 50px">BSP</el-aside>
              <div style="padding-top: 10px">
                <el-form-item label="后返返点" prop="bspRebate">
                  <c-percent-input class="w200" v-model="form.bspRebate" :disabled="!(!form.bspFixedFee || (!!form.bspRebate && !!form.bspFixedFee))" clearable/>
                </el-form-item>
                <el-form-item label="后返金额" prop="bspFixedFee">
                  <el-input class="w200" v-model="form.bspFixedFee" :disabled="!!form.bspRebate" clearable>
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="BSP 出票配置组" prop="bspAccount">
                  <el-select class="w200" v-model="form.bspAccount">
                    <el-option v-for="item in options.etermGroup" :key="item" :label="item" :value="item"/>
                  </el-select>
                </el-form-item>
              </div>
              <!--div>
                <el-form-item label="票价区间">
                  <el-input class="w200" v-model="form.range1">
                    <template slot="append">元</template>
                  </el-input>
                  -
                  <el-input class="w200" v-model="form.range2">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </div-->
          </el-container>
          <el-container class="input-panel">
            <el-aside width="120px" style="line-height: 50px">BOP</el-aside>
              <div  style="padding-top: 10px">
                <el-form-item label="后返返点" prop="bopRebate">
                  <c-percent-input class="w200" v-model="form.bopRebate" :disabled="!(!form.bopFixedFee || (!!form.bopRebate && !!form.bopFixedFee))" clearable/>
                </el-form-item>
                <el-form-item label="后返金额" prop="bopFixedFee">
                  <el-input class="w200" v-model="form.bopFixedFee" :disabled="!!form.bopRebate" clearable>
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="BOP 出票配置组" prop="bopAccount">
                  <el-select class="w200" v-model="form.bopAccount">
                    <el-option v-for="item in options.etermGroup" :key="item" :label="item" :value="item"/>
                  </el-select>
                </el-form-item>
              </div>
              <!--div>
                <el-form-item label="票价区间">
                  <el-input class="w200" v-model="form.range1">
                    <template slot="append">元</template>
                  </el-input>
                  -
                  <el-input class="w200" v-model="form.range2">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </div-->
          </el-container>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <easy-button v-if="!isDetail" type="primary" @click="onOk">确 定</easy-button>
    </div>
  </el-dialog>
</template>

<script>

function chunk (arr, size) {
  const result = []
  for (let i = 0; i < arr.length; i = i + size) {
    result.push(arr.slice(i, i + size))
  }
  return result
}

export default {
  name: 'SDialogAdd',
  props: {
    data: {
      type: Object,
      default () {
        return {
          id: ''
        }
      }
    }
  },
  data () {
    return {
      isDetail: false,
      title: '',
      visible: true,
      loading: false,
      airlineOptions: [],
      checkbox: {
        customerInfo: [],
        cardTypeLimit: []
      },
      options: {
        cardTypeLimit: [],
        openAutoIssue: [
          {'key': 1, 'value': '自动出票'},
          {'key': 0, 'value': '不自出票'}
        ],
        flightWay: [
          {'key': '1', 'value': '单程'},
          {'key': '2', 'value': '往返'}
        ],
        ageType: [
          {'key': 'ADU', 'value': '成人'},
          {'key': 'CHD', 'value': '儿童'}
        ],
        takeoffTimeLimit: [
          {'key': 0, 'value': '都适用'},
          {'key': 2, 'value': '大于等于2小时适用'},
          {'key': 3, 'value': '大于等于3小时适用'},
          {'key': 4, 'value': '大于等于4小时适用'},
          {'key': 12, 'value': '大于等于12小时适用'},
          {'key': 24, 'value': '大于等于24小时适用'},
          {'key': 48, 'value': '大于等于48小时适用'}
        ],
        openDownSubClass: [
          {'key': 0, 'value': '关闭'},
          {'key': 1, 'value': '开启降舱,当有低舱时转人工处理'}
        ],
        openChangePnr: [
          {'key': 0, 'value': '不换编码'},
          // {'key': 2, 'value': '换编码出票,但不XE原编码'},
          {'key': 1, 'value': '换编码出票,出票成功后自动XE原编码'}
        ],
        issueChanel: [
          {'key': 'B2B', 'value': 'B2B'},
          {'key': 'BSP', 'value': 'BSP'},
          {'key': 'BOP', 'value': 'BOP'},
          {'key': 'B2C', 'value': 'B2C'}
        ],
        singleMinProfitType: [
          {'key': '1', 'value': '按价格'},
          {'key': '2', 'value': '按比例'}
        ],
        autoIssuePrice: [
          {'key': '1', 'value': '按低票价出'},
          {'key': '2', 'value': '按订单账单价出'}
        ],
        etermGroup: [],
        customerInfo: []
      },
      form: {
        ruleStatus: '1',
        customerInfo: '',
        ruleName: '',
        openAutoIssue: 1,
        airline: '',
        departDateStart: '',
        departDateEnd: '',
        flightWay: '0',
        applyShareFlight: '0',
        ageType: 'ADU',
        departPort: '',
        departPortExclude: '',
        arrivePort: '',
        arrivePortExclude: '',
        includeFlightNo: '',
        excludeFlightNo: '',
        startTime: '',
        endTime: '',
        takeoffTimeLimit: '',
        applyPolicyCodes: '',
        subClass: '',
        cardTypeLimit: '',
        cardNoLimit: '',
        singleMinProfitType: '1',
        singleMinProfit: '',
        autoIssuePrice: '2',
        openDownSubClass: '',
        openChangePnr: 0,
        openCreatePnr: '',
        protocolNo: '',
        issueChanel1: 'BOP',
        issueChanel1PriceMin: 0,
        issueChanel1PriceMax: '500',
        issueChanel2: 'BSP',
        issueChanel2PriceMin: '501',
        issueChanel2PriceMax: '100000',
        b2bAirlineAccount: '',
        b2bRebate: '',
        b2bFixedFee: '',
        bspAccount: '',
        bopAccount: '',
        excludeFlightTrip: '',
        isComparePrice: 0,
        bspRebate: '',
        bspFixedFee: '',
        bopRebate: '',
        bopFixedFee: '',
        range1: '',
        range2: ''
      },
      rules: {
        issueChanel1: this.$checkRules.airIssueRule.issueChanel,
        issueChanel2: this.$checkRules.airIssueRule.issueChanel,
        airline: this.$checkRules.airIssueRule.airline,
        applyPolicyCodes: this.$checkRules.airIssueRule.applyPolicyCodes
      }
    }
  },
  computed: {
    flightWayArr: {
      get () {
        if (!this.form.flightWay) {
          return []
        } else {
          return this.form.flightWay.split('/')
        }
      },
      set (arr) {
        this.form.flightWay = arr.join('/')
      }
    },
    ageTypeArr: {
      get () {
        if (!this.form.ageType) {
          return []
        } else {
          return this.form.ageType.split('/')
        }
      },
      set (arr) {
        this.form.ageType = arr.join('/')
      }
    },
    cardTypeLimitArr: {
      get () {
        if (!this.form.cardTypeLimit) {
          return []
        } else {
          return this.form.cardTypeLimit.split('/')
        }
      },
      set (arr) {
        this.form.cardTypeLimit = arr.join('/')
      }
    },
    customerInfoArr: {
      get () {
        if (!this.form.customerInfo) {
          return []
        } else {
          return this.form.customerInfo.split('/')
        }
      },
      set (arr) {
        this.form.customerInfo = arr.join('/')
      }
    }
  },
  watch: {
    'form.includeFlightNo' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.includeFlightNo = chunk(str, 6).join('/')
      }
    },
    'form.excludeFlightNo' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.excludeFlightNo = chunk(str, 6).join('/')
      }
    },
    'form.subClass' (v) {
      if (v) {
        this.form.subClass = v.toUpperCase()
      }
    },
    'form.issueChanel1PriceMax' (v) {
      if (v) {
        this.form.issueChanel2PriceMin = (parseInt(v) + 1) + ''
      }
    },
    'form.issueChanel2PriceMin' (v) {
      if (v) {
        this.form.issueChanel1PriceMax = (parseInt(v) - 1) + ''
      }
    },
    'form.departPort' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.departPort = chunk(str, 3).join('/')
      }
    },
    'form.departPortExclude' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.departPortExclude = chunk(str, 3).join('/')
      }
    },
    'form.arrivePort' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.arrivePort = chunk(str, 3).join('/')
      }
    },
    'form.arrivePortExclude' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.arrivePortExclude = chunk(str, 3).join('/')
      }
    },
    'form.excludeFlightTrip' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '').replace(/-/g, '')
        const arr = chunk(str, 3)
        let result = ''
        arr.forEach((v, i) => {
          if (i % 2 === 0) {
            result += '/' + v
          } else {
            result += '-' + v
          }
        })
        this.form.excludeFlightTrip = result.substring(1)
      }
    }
  },
  created () {
    this.loadOptions()
  },
  methods: {
    loadDetail () {
      this.loading = true
      this.$service.airIssueRule.detailAirIssueRule({id: this.data.id}).then(res => {
        Object.assign(this.form, res.data)
        this.form.departDateStart = this.$options.filters.dateFormat(this.form.departDateStart)
        this.form.departDateEnd = this.$options.filters.dateFormat(this.form.departDateEnd)
      }).finally(() => {
        this.loading = false
      })
    },
    onOk (done) {
      this.$refs['form'].validate((valid) => {
        // 校验通过
        if (valid) {
          this.submit(done)
        } else {
          this.$alert('校验未通过', '提示')
          done()
        }
      })
    },
    // 被继承重写
    submit (done) {
      done()
    },
    loadOptions () {
      this.$service.options.getAirLineOption().then(res => {
        this.airlineOptions = res.data
      })
      this.$service.eterm.queryAllGroupList().then(res => {
        this.options.etermGroup = res.data
      })
      this.$service.order.queryAirOnlineShopList().then(res => {
        this.options.customerInfo = res.data
      })
      this.$service.options.getIdType().then(res => {
        this.options.cardTypeLimit = res.data
      })
    }
  }
}
</script>

<style scoped>

.input-panel:first-child {
  border-top: 2px solid #eef1f8;
}

.input-panel {
  border-top: 0;
  border-left: 2px solid #eef1f8;
  border-right: 2px solid #eef1f8;
  border-bottom: 2px solid #eef1f8;
}

.input-panel aside {
  border-right: 2px solid #eef1f8;
  text-align: center;
}
</style>
